<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="tb_id">

</div>
<script>
    let tb_obj_data = {
        "id": "tb_week_seller_div",
        "sort": {
            "key": "chat_total",
            "sort": false
        },
        "tb_class": "layui-table",
        "title": [{
            "key": "name",
            "value": "姓名",
            "class": "layui-bg-red"
        }, {
            "key": "chat_total",
            "value": "群总数",
            "class": "layui-bg-orange"
        },
            {
                "key": "new_chat_cnt",
                "value": "新增群",
                "class": "layui-bg-green"
            }, {
                "key": "st",
                "value": "1",
                "class": "layui-bg-cyan"
            }, {
                "key": "nd",
                "value": "2",
                "class": "layui-bg-cyan"
            }, {
                "key": "rd",
                "value": "3",
                "class": "layui-bg-cyan"
            }, {
                "key": "fo",
                "value": "4",
                "class": "layui-bg-cyan"
            }, {
                "key": "fi",
                "value": "5",
                "class": "layui-bg-cyan"
            }, {
                "key": "si",
                "value": "6",
                "class": "layui-bg-cyan"
            }, {
                "key": "se",
                "value": "7",
                "class": "layui-bg-cyan"
            }],
        "group": [],
        "isGroupDisplay": true,
        allData: {}
    }


    let table_div = {
        "id": "tb_id",
        "sort": {
            "key": "chat_total",
            "sort": false
        },
        "title": [{
            "key": "name",
            "value": "姓名"
        },
            {
                "key": "chat_total",
                "value": "群总数",
            },
            {
                "key": "new_chat_cnt",
                "value": "新增群"
            }, {
                "key": "UrdCnt",
                "value": "随机"
            }],
        "group": [
            {
                "head": [
                    {
                        "name": "头",
                    }
                ],
                "context": [
                    {
                        "UrdCnt": 1,
                        "chat_total": 67,
                        "name": "a",
                        "new_chat_cnt": 6,
                    },
                    {
                        "UrdCnt": 2,
                        "chat_total": 8,
                        "name": "b",
                        "new_chat_cnt": 5,
                    },
                    {
                        "UrdCnt": 3,
                        "chat_total": 9,
                        "name": "c",
                        "new_chat_cnt": 4,
                    }
                ]
            },
            {
                "head": [
                    {
                        "name": "身"
                    }
                ],
                "context": [
                    {
                        "UrdCnt": 1,
                        "chat_total": 7,
                        "name": "a",
                        "new_chat_cnt": 6,
                    },
                    {
                        "UrdCnt": 2,
                        "chat_total": 38,
                        "name": "b",
                        "new_chat_cnt": 5,
                    },
                    {
                        "UrdCnt": 3,
                        "chat_total": 9,
                        "name": "c",
                        "new_chat_cnt": 4,
                    }
                ]
            },
            {
                "head": [
                    {
                        "name": "尾",
                    }
                ],
                "context": [

                    {
                        "UrdCnt": 1,
                        "chat_total": 45,
                        "name": "a",
                        "new_chat_cnt": 6,
                    },
                    {
                        "UrdCnt": 2,
                        "chat_total": 8,
                        "name": "b",
                        "new_chat_cnt": 5,
                    },
                    {
                        "UrdCnt": 3,
                        "chat_total": 9,
                        "name": "c",
                        "new_chat_cnt": 45,
                    },
                    {
                        "UrdCnt": 3,
                        "chat_total": 9,
                        "name": "c",
                        "new_chat_cnt": 4,
                    },
                    {
                        "UrdCnt": 3,
                        "chat_total": 9,
                        "name": "c",
                        "new_chat_cnt": 4,
                    }
                ]
            }
        ]
    }
    addTable(table_div)

    /*比较父级*/
    function compareParent(p, desc) { //这是比较函数,比较二级头
        return function (m, n) {
            let a = m["head"][0][p];
            let b = n["head"][0][p];
            if (desc) {
                return a - b;
            } else {
                return b - a; //降序
            }
        }
    }

    /*比较子集*/
    function compareSon(p, desc) {
        return function (m, n) {
            let a = m[p];
            let b = n[p];
            if (desc) {
                return a - b;
            } else {
                return b - a; //降序
            }
        }
    }

    /*入口*/
    function addTable(tb_object) {
        console.log(tb_object)
        /*填充组头数据*/
        if (tb_object['group'] !== undefined) {
            let groups = tb_object['group'];
            groups.forEach((groupsValue, groupsKey) => {
                groupsValue.context.sort(compareSon(tb_object.sort.key, tb_object.sort.sort))
                /*遍历组头（组头可能有多个）*/
                groupsValue.head.forEach((headValue, headKey) => {
                    /*遍历表头，拿到key获取组头的对应值*/
                    tb_object.title.forEach((tb_title_value) => {
                        /*组头的当前值*/
                        let temp = headValue[tb_title_value.key];
                        /*组头的临时值*/
                        let tempGroupValue = 0;
                        /*如果组头的当前值为空，则为组头赋值*/
                        if (temp === undefined || temp === '' || temp === null) {
                            groupsValue.context.forEach((contextValue) => {
                                tempGroupValue += contextValue[tb_title_value.key]
                            })
                            tb_object.group[groupsKey].head[headKey][tb_title_value.key] = tempGroupValue
                        }
                    })
                })
            })
        } else {
            return;
        }
        tb_object.group.sort(compareParent(tb_object.sort.key, tb_object.sort.sort));
        creatTable(tb_object);
    }

    /*数据解析并加入到dom*/
    function creatTable(table_object) {
        let title, groups, title_ele = ``, group_ele = ``, id;
        if (table_object['id'] !== undefined) {
            id = table_object['id'];
        }
        title_ele += `<table>`;
        if (table_object['title'] !== undefined) {
            title = table_object['title'];
            title_ele += `<tr>`
            for (let titleElement of title) {
                title_ele += `<th>` + titleElement.value + `</th>`
            }
            title_ele += `</tr>`
        } else {
            return;
        }
        if (table_object['group'] !== undefined) {
            groups = table_object['group'];
            for (let group of groups) {
                for (let headElement of group.head) {
                    group_ele += `<tr>`
                    for (let titleElement of title) {
                        group_ele += `<td>` + headElement[titleElement.key] + `</td>`
                    }
                    group_ele += `</tr>`
                }
                // console.log(contexts.context)
                for (let contextElement of group.context) {
                    // console.log(contextElement)
                    group_ele += `<tr>`
                    /*遍历表头，获取一行每一单元格的值*/
                    for (let titleElement of title) {
                        group_ele += `<td>`
                            + contextElement[titleElement.key]
                            + `</td>`
                    }
                    group_ele += `</tr>`
                }
            }
            title_ele += group_ele;
        } else {
            return;
        }
        title_ele += `</table>`;
        let elementById = document.getElementById(id);
        elementById.innerHTML = title_ele;
    }
</script>
</body>
</html>